<template>
	<app-layout>
		<view>
			<!-- 顶部自定义导航 -->
			<tn-nav-bar>用户</tn-nav-bar>
			<view class="top-backgroup">
				<image src="/static/my-bg4.png" mode='widthFix' class='backgroud-image'></image>
			</view>
			<view class="about__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
				<!-- 图标logo/头像 -->
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom"
					style="margin-top: -450rpx;" @click="tn('/minePages/info')">
					<view class="justify-content-item">
						<view class="tn-flex tn-flex-col-center tn-flex-row-left" v-if="userinfo">
							<view>
								<u-avatar :text="userinfo.FstaffName[0]" fontSize="18" :size="50"
									randomBgColor></u-avatar>
							</view>
							<view class="tn-padding-right">
								<view class="tn-padding-right tn-padding-left-sm">
									<text class="tn-color-cat  tn-text-bold">{{userinfo.FstaffName}} </text>
								</view>
								<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
									<text class="">{{userinfo.FUserGroup}}</text>
								</view>
							</view>
						</view>

					</view>
					<!-- <view class="timer">
						{{nowTime}}
					</view> -->
				</view>
				<!-- 更多信息-->
				<view class="allbox">
					<block v-for="m,index in menu" :key="index">
						<!-- v-if="isshow(m)" -->
						<view class="abox" @click="tn(m)" v-if="m.meta.icon">
							<view class="atitle">{{m.name}}</view>
							<view class="aicon">
								<text :class="m.meta.icon"></text>
							</view>
						</view>
					</block>
				</view>
			</view>
			<bar :currentIndex="0"></bar>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex";
	import locationmixin from '@/libs/mixin/location_mixin.js'
	export default {

		data() {
			return {
				menu: [],
				// nowTime: this.$utils.datetime('Y-m-d h:i:s'),
				timer: ''
			}
		},
		mixins: [locationmixin],
		async onLoad(options) {
			await this.$user.getInfo();
			this.getWarehouseList();
			this.getPersonList();
				// Vue.prototype.$storage.setStorageSync('menu', );
			this.menu = ROUTES
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo,
			})
		},
		onShow() {
			console.log('onShow')
			// this.getNow()
		},

		onHide() {
			console.log('onHide')
			clearInterval(this.timer)
		},
		methods: {
			// getNow() {
			// 	let that = this;
			// 	this.timer = setInterval(() => {
			// 		that.nowTime = that.$utils.datetime('Y-m-d h:i:s')
			// 	}, 1000)
			// },
			isshow(m) {
				if (m.type == 'view' && m.FEdit == 1) {
					return true;
				}
				if (m.type == 'add' && m.FAdd == 1) {
					return true;
				}
			},
			// 跳转
			tn(e) {
			
				let auth = this.$user.getAuth(e.meta.FItemId,true)
				console.log('auth',auth);
				if(!auth){
					this.$t.message.toast('暂无权限，请联系管理员');
					return ;
				}
				uni.navigateTo({
					url: e.path,
				});
			},

			getPersonList() {
				let that = this;
				that.$request({
					url: that.$api.common.person,
					data: {}
				}).then(response => {
					if (response.code === 0) {
						console.log(response)
						that.$storage.setStorageSync('personlist', response.list)
					}
				}).catch((msg) => {
					this.$t.message.toast(msg);
					this.$t.message.closeLoading();
				});
			},
			getWarehouseList() {
				let that = this;
				that.$request({
					url: that.$api.common.warehouse,
					data: {}
				}).then(response => {
					if (response.code === 0) {
						console.log(response)
						that.$storage.setStorageSync('cklist', response.list)
					}
				}).catch((msg) => {
					this.$t.message.toast(msg);
					this.$t.message.closeLoading();
				});
			},
		},

	}
</script>

<style lang="scss" scoped>
	.allbox {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
		font-size: 40rpx;
	}

	.allicon {
		padding-left: 40rpx;
		font-size: 40rpx;
	}

	.atitle {
		font-size: 26rpx;
		padding-left: 40rpx;
	}

	.abox {
		box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 0, 0, 0.05);
		width: 350rpx;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: left;
		margin: 10rpx 0;
		background: #fff;
		border-radius: 5px;
		position: relative;
		// background-image: linear-gradient(to right bottom , #007FFF,#0062FF, #007FFF);
		background-image: linear-gradient(to right bottom, #fbfdff, #ffffff, #e8f3ff);
	}

	.aicon {
		width: 90rpx;
		height: 90rpx;
		right: 20rpx;
		top: 15rpx;
		display: flex;
		position: absolute;
		align-items: center;
		justify-content: center;
		font-size: 70upx;
		color: #fff;
		background-image: linear-gradient(135deg, #4292e7 10%, #0a67b7 100%);
		border-radius: 5px;
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}

	.title {
		padding: 26rpx 30rpx;
	}

	.about {
		&__wrap {
			position: relative;
			z-index: 1;
			margin: 50rpx 20rpx 20rpx 20rpx;
		}
	}

	.timer {
		font-size: 16px;
		font-weight: bold;
		padding-right: 10px;
		background: linear-gradient(278.83deg, #0062ff 31.42%, #013789 75.55%);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
	}

	/* 顶部背景图 start */
	.top-backgroup {
		height: 450rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 450rpx;
			// z-index: -1;
		}
	}
</style>